<template>
  <div id="salvenote">
    <div class="page-header">
      <span class="title-item">排口运维任务</span>
    </div>
    <a-form-item label="完成情况" labelAlign="right" style="margin-bottom:10px">
          <a-select @change="selectArea" style="width: 300px">
            <a-select-option value="1"> 未完成 </a-select-option>
            <a-select-option value="2"> 进行中 </a-select-option>
            <a-select-option value="3"> 已完成 </a-select-option>
          </a-select>
        </a-form-item>
    <div class="tableclass">
      <a-table
        style="height: 94%"
        :data-source="data"
        :pagination="false"
        :columns="columns"
      >
        <span slot="action" slot-scope="text, action">
          <a class="solvebtn" @click="showModal(action)">详细信息</a>
        </span>
      </a-table>
      <div class="bottompage">
        <a-pagination
          :show-total="(total) => `共 ${total} 条记录`"
          :item-render="itemRender"
          v-model="page.current"
          :total="total"
          :defaultPageSize="page.size"
          @change="pagechangeFn"
          show-less-items
        />
      </div>
      <!-- 详情弹出框 -->
      <a-modal
        title="分派详情"
        :visible="visible"
        @cancel="handleCancel"
        :footer="null"
      >
        <a-form-model
          class="monitorCalibrationRecordPoover"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-form-model-item label="排口名称">{{
            this.detail.equipmentName
          }}</a-form-model-item>
          <a-form-model-item label="任务名称">{{
            this.detail.name
          }}</a-form-model-item>
          <a-form-model-item label="计划开始时间">{{
            this.detail.planStartTime
          }}</a-form-model-item>
          <a-form-model-item label="计划结束时间">{{
            this.detail.planEndTime
          }}</a-form-model-item>
          <a-form-model-item label="间隔天数">{{
            this.detail.interval
          }}</a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { log } from "video.js";

export default {
  data() {
    return {
      form: {},
      userList: [],
      tableType: 0,
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.page.current - 1) * this.page.size + index + 1}`,
        },
        {
          title: "排口名称",
          dataIndex: "equipmentName",
          align: "center",
        },
        {
          title: "任务名称",
          dataIndex: "name",
          align: "center",
        },
        {
          title: "开始时间",
          dataIndex: "planStartTime",
          align: "center",
        },
        {
          title: "结束时间",
          dataIndex: "planEndTime",
          width: "18%",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          width: "20%",
          align: "center",
        },
      ],
      ischange: 0,
      data: [],
      title: "",
      moment,
      page: {
        current: 1,
        size: 10,
        status: "",
      },
      total: 0,
      //详情弹出框
      visible: false,
      //详情数据
      detail: [],
    };
  },

  methods: {
     //选择完成情况
    selectArea(value) {
      this.page.status = value;
      this.getdata();
    },
    //分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.getdata();
    },
    //弹出框方法,查看详情
    showModal(data) {
      this.detail = data;
      this.visible = true;
      let id = data.id;
    },
    //关闭弹窗
    handleCancel(e) {
      this.visible = false;
    },
    //获取数据
    getdata() {
      var that = this;
      this.$api.task_findByPage(this.page).then((res) => {
        console.log(res);
        var result = res.data.data;
        for (var i = 0; i < result.length; i++) {
          if (result[i].equipmentCount == null) {
            result[i].equipmentCount = "";
          }
          if (result[i].equipmentType == null) {
            result[i].equipmentType = "";
          }
        }
        this.data = res.data.data;
        this.data.forEach((item) => {
          if (item.planStartTime === null) {
            item.planStartTime = "";
          } else {
            item.planStartTime = moment(item.planStartTime).format(
              "YYYY/MM/DD HH:mm:ss"
            );
          }
          if (item.planEndTime === null) {
            item.planEndTime = "";
          } else {
            item.planEndTime = moment(item.planEndTime).format(
              "YYYY/MM/DD HH:mm:ss"
            );
          }

        });
        that.data = result;
        this.total = res.data.total;
      });
    },
  },
  mounted() {
    this.getdata();
  },
};
</script>
<style scoped src="../../../../assets/style/warning.css"></style>
<style scoped lang="scss" >
.monitorCalibrationRecordPoover {
  height: 500px !important;
  overflow: scroll;
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
.monitorCalibrationRecordPo {
  font-size: 18px;
  text-align: center;
  color: #9fb043;
}
.listcentent {
  font-size: 16px;
  text-align: center;
  color: #bebebe;
  line-height: 30px;
  height: 30px;
}
.listcontent {
  font-size: 16px;
  text-align: center;
  color: #bebebe;
}
.faultlist {
  padding-top: 20px !important;
  border-top: 1px dashed #bebebe;
  font-size: 19px;
  color: #37ddc0;
  font-weight: bold;
}
.ischange {
  color: #37ddc0 !important;
}
.tablename {
  display: flex;
}
.scroll-bar {
  height: 500px;
  overflow-y: auto;
}

::v-deep .ant-descriptions-title {
  color: #37ddc0;
  font-size: 24px;
}
::v-deep#salvenote .ant-form-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

::v-deep#salvenote .ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#salvenote {
  position: relative;
  width: 98%;
  height: 98%;
  padding: 1%;
  box-sizing: border-box;
}
.solve-img {
  display: flex;
  justify-content: space-evenly;
}
/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}
#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #2c6a5f;
}
#salvenote .ant-btn-danger {
  color: #1c2c2c;
  margin-right: 10px;
  background-color: #2c6a60;
  border: none;
  font-weight: 700;
}
::v-deep#salvenote .ant-table table {
  height: auto;
  border-radius: 0;
  border-left: 1px solid #207064;
  border-right: 1px solid #207064;
}
.bottompage {
  position: absolute;
  right: 3%;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
}
#salvenote ::v-deep .ant-checkbox-inner {
  border: 2px solid #2e9685;
  background-color: rgba(140, 179, 174, 0.5) !important;
}
#salvenote .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border: 0;
  background-color: rgba(30, 50, 48, 0.5);
  box-shadow: 0 0 10px 1px #188471 inset;
}

.ant-pagination {
  color: #bebebe;
}
.ant-form-item {
  color: #bebebe;
}
// 详情
::v-deep #salvenote .ant-form-item-children {
  color: rgba(255, 255, 255, 0.7);
}

.monitorCalibrationRecordPo {
  font-size: 22px;
  text-align: center;
  color: #9fb043;
}
.monitorCalibrationRecordPoList {
  font-size: 18px;
  text-align: center;
  color: #bebebe;
}
.monitorCalibrationRecordPotitle {
  font-size: 30px;
  color: #37ddc0;
}
.driftCalibrationPoList {
  font-size: 18px;
  text-align: center;
  color: #bebebe;
}

::v-deep .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  background: #2c6a5f;
  border: 1px solid #3cbda6;
}
::v-deep .ant-tabs-bar {
  border-bottom: 1px solid #3cbda6;
}
::v-deep .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  color: #9fb043;
}
::v-deep .ant-tabs-nav .ant-tabs-tab:hover {
  color: #9fb043;
}
</style>

